<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>图片对齐方式</title>
		<style>
			div {
				border: 1px solid red;
			}
			img {
				/* 这个是改变图片的显示模式 从行内块变成了块元素
				vertical-align 是行内块元素独有的,
				 */
				display:block;
				width: 200px;
				height: 200px;
				/* bottom top middle */
				/* vertical-align: middle; */
			}
		</style>
	</head>
	<body>
		<div>
			<!-- img 和包围的div 会有一些间距,
				就是因为基线对齐导致的 -->
			<!-- img,input,行内块 form是块元素 -->
			<img src="./tudou.jpg" alt="土豆网" />
		</div>
	</body>
</html>
